<template>
    <table width="100%" class="score-tbl">
      <tr>
        <th>名次</th>
        <th>队伍</th>
        <th>完成任务数</th>
      </tr>
      <tr v-for="group in list" v-bind:key="group.groupName">
        <td style="padding: 0 10px;color: #dc143c;font-size: 20px;font-weight: 700">{{group.rankNum}}</td>
        <td>{{group.groupName}}</td>
        <td>{{group.source}}个</td>
      </tr>
    </table>
</template>

<script>
export default {
  name: 'scorelist',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: []
    }
  },
  created () {
    this.getScoreList()
    this.timer = setInterval(() => {
      this.getScoreList()
    }, 15000)
  },
  methods: {
    getScoreList: function () {
      this.$http.get('/server/job/getRanking')
        .then(function (res) {
          this.list = res.data.data
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .score-tbl tr th{
    font-size: 16px;
    color: #673AB7;
  }
  .score-tbl tr td{
    line-height: 1.5em;
    font-size: 12px;
    color: #10025a;
  }
</style>
